<!DOCTYPE html>
<html lang="en">
<>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
    

     <!-- 引入 editor.md 的依赖  -->
     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
     <script src="js/jquery.min.js"></script>
     <script src="editor.md/lib/marked.min.js"></script>
     <script src="editor.md/lib/prettify.min.js"></script>
     <script src="editor.md/editormd.js"></script>
</head>
<body>
    <div class="nav">
        <img src="image/ikun2.jpg" alt="坤坤消失了">
        <span class="title">ikun的博客系统</span>
        <span class="spacer"></span><!--用于占位布局将头像与链接左右分隔-->
        <a href="#">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="loginOut">注销</a>
    </div>

    <div class="container">
        <div class="container-left">
            <div class="card">
                <img src="image/ikun3.jfif" alt="下蛋">
                <h4>鸽鸽</h4>
                <a href="#" class="gitee">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>--</span>
                    <span>--</span>
                </div>

            </div>
        </div>


        <div class="container-right">
           <div class="blog-content">
           <h3 class="title"></h3>
           <div class="data"></div>
           <div class="content" id="content">
           
           </div>

           </div>
        </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
        <!-- <script src="js/app.js"></script>  -->
        <script src="js/checkLogin.js"></script>
        <script>
            function getBlog() {
                $.ajax({
                    type: 'get',
                    url: 'blog' + location.search,
                    success: function(body) {
                        // body 就是得到的一个 json 格式的 博客数据. 由于响应的 Content-Type 是 application/json
                        // 因此 jquery 就会自动把响应数据转成 js 对象. 
                        let h3 = document.querySelector('.blog-content h3');
                        h3.innerHTML = body.title;
                        let divDate = document.querySelector('.blog-content .data');
                        divDate.innerHTML = body.postTime;
                        // 刚才这里是直接把正文内容设置到 innerHTML 中了, 没有渲染的过程的. 
                        // let divContent = document.querySelector('#content');
                        // divContent.innerHTML = body.content;
                        // 靠谱的做法, 应该是先使用 editor.md 进行渲染. 
                        // [重要] 这个方法就是 editor.md 提供的一个方法把 markdown 字符串转成格式化的效果. 
                        // 第一个参数是一个 div 的 id, 表示要把渲染结果放到哪个 div 中. 
                        // 第二个参数是一个 js 对象, 把正文内容传入即可. (还支持很多别的参数属性, 此处暂时不涉及)
                        editormd.markdownToHTML('content', {
                            markdown: body.content
                        });
                    }
                });
            }

            function getInfor(){
            $.ajax({
                type:'get',
                url:'userInfor'+ location.search,
                success:function(body){
                    let h4=document.querySelector('.card h4');
                    h4.innerHTML=body.userName;

                    if(body.authorSelf){
                        
                     // 在导航栏中加个按钮, 用来删除文章. 
                     let deleteA = document.createElement('a');
                        // location.search 就是当前页面 url 的 query string, 也就是
                        // ?blogId=1 这样的结果. 
                        deleteA.href = 'delete' + location.search;
                        deleteA.innerHTML = '删除';

                        let navDiv = document.querySelector('.nav');
                        navDiv.appendChild(deleteA);
                    }
                }
            });
        }
        
        getInfor();
    
            // 在页面加载之后, 要调用代码. 
            getBlog();
    
            // 验证登录状态
            checkLogin();
        </script>

</body> 
</html>